<template>
  <div>
    <!-- 标题 -->
    <div class="titles">
      <h2>学习成果类别</h2>
    </div>
    <hr class="underline">
    <!-- 功能区域 -->
    <div id="margins" class="header">
      <div class="headerone">
        <el-button type="success" @click="add('添加学习成果类别')">
          <i class="el-icon-plus">添加</i>
        </el-button>
      </div>
    </div>

    <div class="line">
      <div style="width: 25%;"></div>
      <!-- 列表 -->
      <div class="lists" id="margins">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="序号" type="index" width="200" align="center"></el-table-column>
          <el-table-column prop="type_name" label="类别" align="center"> </el-table-column>
          <el-table-column fixed="right" label="操作" align="center" width="200">
                          
           <template slot-scope="scope">
             <el-button type="primary" @click="alter(scope.row)" size="small" style="margin-right: 10px ;">编辑</el-button>
              <el-popconfirm :title="'是否要删除 '+scope.row.type_name+' 类别'"  @onConfirm="deletE(scope.row.type_id)">
                  <el-button slot="reference" type="danger"  size="small">删除</el-button>
              </el-popconfirm>
            </template>

          </el-table-column>



        </el-table>
        <div class="paging">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="params.pageNum" :page-sizes="[10, 15, 20]" :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
      <div style="width: 25%;"></div>
    </div>

    <!-- 弹出添加类别信息-->
    <el-dialog class="demoRuleForm" :title="DialogTitle" :visible.sync="Dialog" center>
      <el-form :model="ruleForm" status-icon ref="ruleForm" :label-width="LabelWidth" size="200">
        <el-form-item label="类别" prop="type_name" class="Inputs1">
          <el-input v-model="ruleForm.type_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Dialog = false">取 消</el-button>
        <el-button type="primary" v-show="this.sure == '添加'" @click="addDialog('ruleForm')">确定添加</el-button>
        <el-button type="primary" v-show="this.sure == '修改'" @click="updateById('ruleForm')">确定修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findTypeAll, findTypeAdd, deleteById, updateById, } from "@/api/admin/achievement_typeAPI";


export default {
  data() {
    return {
      // 分页
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      // 总共信息条数
      total: 0,
      // 类别列表
      tableData: [],
      // 提交类别信息
      ruleForm: {
        type_name: "",
      },
      //添加类别信息宽度
      LabelWidth: "50px",
      // 添加弹框是否展示
      Dialog: false,
      // 区分添加修改弹窗
      sure: '',
      DialogTitle: "",
    };
  },
  created() {
    this.findBySearch();
  },
  methods: {
    // 添加类别弹框
    add(title) {
      this.ruleForm = {}
      this.sure = '添加'
      this.Dialog = true;
      this.DialogTitle = title;
    },
    // 修改类别弹框
    alter(row) {
      this.ruleForm = {}
      this.add("修改学生信息");
      this.sure = '修改'
      this.Dialog = true;
      this.ruleForm = row;
    },
    // 添加修改类别方法
    addDialog() {
      // 新增类别
      findTypeAdd(this.ruleForm).then((res) => {
        if (res.code === 200) {
          console.log("添加");
          this.Dialog = false;
          this.findBySearch();
        }
      });
    },
    // 修改类别else if
    updateById() {
      updateById(this.ruleForm).then((res) => {
        if (res.code === 200) {
          console.log("修改");
          this.Dialog = false;
          this.$message({
            message: "修改成功",
            type: "success",
          })
        }
      })
    },
    //类别分页查询
    findBySearch() {
      findTypeAll({
        pageNum: this.params.pageNum,
        pageSize: this.params.pageSize,
      }).then((res) => {
        if (res.code === 200) {
          // //给列表渲染数据
          this.tableData = res.data.list;
          // // 数据总条数
          this.total = res.data.total;
        }
      });
    },
    handleSizeChange(pagesize) {
      this.params.pageSize = pagesize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum) {
      this.params.pageNum = pageNum;
      this.findBySearch();
    },
    // 删除类别
    deletE(type_id) {
      console.log("row", type_id);
      deleteById(type_id).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功")
          this.findBySearch();
        } else {
          this.$message.error("删除失败")
        }
      })
    },
  

  },
};
</script>

<style>
/* 分页样式 */
.paging {
  padding-top: 20px;
  text-align: right;
}

/* 搜索框样式 */
/* .inline {
  margin: 10px 50px 10px 0px;
  width: 200px;
} */
/* .header{
  display: flex;
  align-items: center;
} */

/* 添加按钮 */
.headerone {
  position: absolute;
  top: 80px;
  right: 50px;

}

/* 类别列表样式 */
.lists {
  width: 100%;
  margin-top: 40px;
  align-content: center;
}

/* 弹窗样式 */
.demoRuleForm {
  width: 700px;
  margin: 0px auto;
}

/* 添加类别输入框样式 */
.Inputs1 {
  width: 250px;
}


/* 列表在一行样式 */
.line {
  display: flex;
}
</style>
